<template>
	<view class="container">
		<view class="imgBox"><image src="../../static/logo.png" mode=""></image></view>
		<view class="title">欢迎登录Mojito博客</view>

		<!-- 登录 -->
		<u--form
			ref="form1"
			v-if="isRegister"
			:model="form"
			:rules="rules"
			labelWidth="60"
			:labelStyle="{ color: '#9ca8b8' }"
		>
			<u-form-item
				:class="{ active: current == 1 }"
				@click="current = 1"
				label="手机号"
				prop="phone"
				borderBottom
			>
				<u--input @blur="cancelSelect" color="#9ca8b8" v-model="form.phone" border="none"></u--input>
			</u-form-item>
			<u-form-item
				:class="{ active: current == 2 }"
				@click="current = 2"
				label="密码"
				prop="password"
				borderBottom
			>
				<u--input
					:password="true"
					@blur="cancelSelect"
					color="#9ca8b8"
					v-model="form.password"
					border="none"
				></u--input>
			</u-form-item>
		</u--form>

		<!-- 注册 -->
		<u--form ref="form1" v-else :model="form" labelWidth="60" :labelStyle="{ color: '#9ca8b8' }">
			<u-form-item :class="{ active: current == 3 }" @click="current = 3" label="昵称" prop="name" borderBottom>
				<u--input @blur="cancelSelect" color="#9ca8b8" v-model="form.name" border="none"></u--input>
			</u-form-item>
			<u-form-item
				:class="{ active: current == 4 }"
				@click="current = 4"
				label="手机号"
				prop="phone"
				borderBottom
			>
				<u--input @blur="cancelSelect" color="#9ca8b8" v-model="form.phone" border="none"></u--input>
			</u-form-item>
			<u-form-item
				:class="{ active: current == 5 }"
				@click="current = 5"
				label="密码"
				prop="password"
				borderBottom
			>
				<u--input
					:password="true"
					@blur="cancelSelect"
					color="#9ca8b8"
					v-model="form.password"
					border="none"
				></u--input>
			</u-form-item>
		</u--form>
		<!-- 切换模块 -->
		<view class="shift" v-if="isRegister" @click="shift">没有账号？去注册</view>
		<view class="shift" v-else @click="shift">已有账号？去登录</view>
		<!-- 登录注册按钮 -->
		<u-button
			class="ubtn"
			@click="login"
			v-if="isRegister"
			shape="circle"
			color="#c1cbd7"
			type="primary"
			text="登录"
		></u-button>
		<u-button
			class="ubtn"
			@click="register"
			v-else
			shape="circle"
			color="#c1cbd7"
			type="primary"
			text="注册"
		></u-button>
	</view>
</template>

<script>
import { register, login } from '@/config/api.js';
export default {
	name: 'login',
	data() {
		return {
			form: {
				name: '',
				phone: '',
				password: ''
			},
			// 验证规则
			rules: {
				name: [
					{
						required: true,
						message: '此为必填字段',
						trigger: ['blur']
					}
				],
				phone: [
					{
						required: true,
						message: '此为必填字段',
						trigger: ['blur']
					},
					{
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						transform(value) {
							return String(value);
						},
						message: '手机号格式不正确',
						trigger: ['blur']
					}
				],
				password: [
					{
						required: true,
						message: '此为必填字段',
						trigger: ['blur']
					},
					{
						max: 18,
						min: 6,
						message: '请输入6~18位数的密码',
						trigger: ['blur']
					}
				]
			},
			// 切换登录注册
			isRegister: true,
			// 控制激活样式
			current: 0
		};
	},
	props: ['blogid'],
	methods: {
		async login() {
			try {
				// #ifndef MP-WEIXIN
				await this.$refs.form1.validate();
				uni.showLoading();
				// 通过了表单验证
				const res = await login(this.form);
				// 登录后把个人信息存起来
				this.$store.dispatch('setUserAvatar', res);
				uni.hideLoading();
				uni.showToast({
					title: '登录成功',
					duration: 2000
				});
				if (this.blogid) {
					// 博客详情页
					// 2秒后跳转页面，通过自定义事件通知父组件关闭弹出层
					setTimeout(() => {
						this.$emit('closeLogin');
						uni.redirectTo({
							url: `/subpages/detail/detail?blogid=${this.blogid}`
						});
					}, 2000);
				} else {
					// 2秒后跳转页面
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 2000);
				}
				// #endif
				// #ifdef MP-WEIXIN
				await this.$refs.form1.validate();
				uni.showLoading();
				uni.request({
					url: 'https://eggblog.bluej.cn/api/user/login',
					method: 'POST',
					data: {
						...this.form
					},
					success: res => {
						console.log('成功回调', res);
						if (res.data.code == 409) {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							});
							return;
						}
						// 登录后把个人信息存起来
						this.$store.dispatch('setUserAvatar', res.data.data);
						uni.hideLoading();
						uni.showToast({
							title: '登录成功',
							duration: 2000
						});
						if (this.blogid) {
							// 博客详情页
							// 2秒后跳转页面，通过自定义事件通知父组件关闭弹出层
							setTimeout(() => {
								this.$emit('closeLogin');
								uni.redirectTo({
									url: `/subpages/detail/detail?blogid=${this.blogid}`
								});
							}, 2000);
						} else {
							// 2秒后跳转页面
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 2000);
						}
					}
				});
				// #endif
			} catch (err) {
				// 未通过表单验证
				console.log(err);
				uni.hideLoading();
				if (!err.data) return;
				uni.showToast({
					title: err.data.msg,
					icon: 'error',
					duration: 2000
				});
			}
		},
		async register() {
			try {
				// #ifndef MP-WEIXIN
				await this.$refs.form1.validate();
				uni.showLoading();
				// 通过了表单验证
				const res = await register(this.form);
				uni.hideLoading();
				uni.showToast({
					title: '注册成功'
				});
				setTimeout(() => {
					this.shift();
				}, 1500);
				console.log(res);
				// #endif
				// #ifdef MP-WEIXIN
				this.$refs.form1.setRules(this.rules);
				await this.$refs.form1.validate();
				uni.showLoading();
				uni.request({
					url: 'https://eggblog.bluej.cn/api/user/register',
					method: 'POST',
					data: {
						...this.form,
						projectId: 155
					},
					success: res => {
						console.log(res);
						if (res.data.code == 409) {
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'error',
								duration: 2000
							});
							return;
						}
						uni.hideLoading();
						uni.showToast({
							title: '注册成功'
						});
						setTimeout(() => {
							this.shift();
						}, 1500);
					}
				});
				// #endif
			} catch (err) {
				// 未通过表单验证
				console.log(err);
				uni.hideLoading();
				if (!err.data) return;
				uni.showToast({
					title: err.data.msg,
					icon: 'error',
					duration: 2000
				});
			}
		},
		// 切换登录注册模块
		shift() {
			this.isRegister = !this.isRegister;
			// 清除校验结果
			this.$refs.form1.clearValidate();
			this.form = {
				name: '',
				phone: '',
				password: ''
			};
		},
		// 取消选择
		cancelSelect() {
			this.current = 0;
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	.imgBox {
		width: 28vw;
		height: 28vw;
		margin-top: 5vw;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.title {
		margin: 2vh auto;
		font-size: 6vw;
		font-weight: 700;
		color: #9ca8b8;
	}
	::v-deep .u-line {
		border-bottom: 0 !important;
	}
	.shift {
		margin: 2vh auto;
		text-decoration: underline;
		color: #c1cbd7;
		font-size: 14px;
	}
	.u-form-item {
		border-bottom: 1px solid #c1cbd7;
	}
	.active {
		border-bottom: 1px solid #7fa7d7;
	}
	.ubtn {
		width: 60vw;
	}
}
</style>
